Enhance projects page with animated detail transitions - #45

sequenceDiagram
  actor User
  participant ProjectsView
  participant ProjectBrowser
  participant Overlay as ProjectDetailOverlay
  participant FocusMgr as FocusManager
  participant KB as KeyboardHandler

  User->>ProjectsView: Navigate to /projects
  ProjectsView->>ProjectBrowser: Render with projects
  ProjectBrowser-->>User: Show animated project list

  User->>ProjectBrowser: Click project button
  ProjectBrowser->>ProjectBrowser: setActiveSlug(slug)
  ProjectBrowser->>Overlay: Mount overlay with activeProject
  Overlay-->>User: Animate overlay open
  Overlay->>FocusMgr: useEffect(activeProject) set focus to closeRef
  FocusMgr-->>Overlay: close button focused

  User->>KB: Press ArrowRight key
  KB->>ProjectBrowser: openNext()
  ProjectBrowser->>ProjectBrowser: update activeSlug to nextProject.slug
  ProjectBrowser->>Overlay: Animate layoutId transition to next project

  User->>KB: Press Escape key
  KB->>ProjectBrowser: closeDetail()
  ProjectBrowser->>Overlay: Unmount overlay
  Overlay-->>User: Animate overlay close
  ProjectBrowser->>FocusMgr: useEffect(activeProject=null)
  FocusMgr->>ProjectBrowser: Focus lastSlug button in list
  ProjectBrowser-->>User: List retains scroll position and focus

classDiagram
  class ProjectsView {
    +ProjectFilter filter
    +ProjectsView(filter)
  }

  class ProjectBrowser {
    +Project[] projects
    -string activeSlug
    -Record_string_HTMLButtonElement_or_null buttonRefs
    -HTMLButtonElement_or_null closeRef
    -string_or_null lastSlug
    +ProjectBrowser(projects)
    +openDetail(slug string) void
    +closeDetail() void
    +openPrevious() void
    +openNext() void
    +setButtonRef(slug string, node HTMLButtonElement_or_null) void
  }

  class ProjectDetailView {
    +Project project
    +Project_or_undefined previous
    +Project_or_undefined next
    +ProjectDetailView(project, previous, next)
  }

  class Project {
    +string slug
    +string title
    +string summary
    +string description
    +string[] categories
    +ProjectDates dates
    +ProjectStatus status
    +ProjectStackItem[] stack
    +ProjectLinks_or_undefined links
    +ProjectMedia_or_undefined media
  }

  class ProjectDates {
    +Date start
    +Date_or_undefined end
    +Date updated
    +number year
  }

  class ProjectLinks {
    +string_or_undefined live
    +string_or_undefined repo
    +string_or_undefined docs
  }

  class StatusBadge {
    +StatusBadge(status ProjectStatus)
  }

  class StackPills {
    +StackPills(stack ProjectStackItem[], className string)
  }

  class MediaFrame {
    +MediaFrame(media ProjectMedia)
  }

  class ProjectNav {
    +ProjectNav(previous Project_or_undefined, next Project_or_undefined)
  }

  ProjectsView --> ProjectBrowser : renders
  ProjectsView --> Project : filters via filterProjects

  ProjectBrowser --> Project : consumes
  ProjectBrowser ..> StatusBadge : uses
  ProjectBrowser ..> StackPills : uses

  ProjectDetailView --> Project : displays
  ProjectDetailView ..> StatusBadge : uses
  ProjectDetailView ..> StackPills : uses
  ProjectDetailView ..> MediaFrame : conditionally uses
  ProjectDetailView ..> ProjectNav : uses

  Project --> ProjectDates
  Project --> ProjectLinks
  Project --> ProjectMedia
  Project --> ProjectStackItem